import React from "react"
import { TabBar } from 'antd-mobile';
import {withRouter} from "react-router-dom"
class TabBarExample extends React.Component {
    constructor(props) {
        super(props);
        // console.log(props);
        this.state = {
            selectedTab: 'redTab',
            hidden: false,
            fullScreen: true,
        };
    }
    render() {
        return (
            <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#ff2d4a"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >
                    <TabBar.Item
                        title="首页"
                        key="index"
                        icon={
                            <i className="iconfont iconshouye"></i>
                        }
                        selectedIcon={ <i className="iconfont iconshouye" style={{color:"#ff2d4a"}}></i>
                        }
                        selected={this.props.location.pathname === "/"}
                        onPress={() => {
                            this.props.history.push("/")
                        }}
                        data-seed="logId"
                    >
                        {this.props.location.pathname === "/"&&this.props.children}
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <i className="iconfont iconleimupinleifenleileibie"></i>
                        }
                        selectedIcon={
                            <i className="iconfont iconleimupinleifenleileibie" style={{color:"#ff2d4a"}}></i>
                        }
                        title="分类"
                        key="category"
                        selected={this.props.location.pathname === "/category"}
                        onPress={() => {
                            this.props.history.push("/category")
                        }}
                        data-seed="logId1"
                    >
                        {this.props.location.pathname === "/category"&&this.props.children}
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <i className="iconfont icongouwuche"></i>
                        }
                        selectedIcon={
                            <i className="iconfont icongouwuche" style={{color:"#ff2d4a"}}></i>
                        }
                        title="购物车"
                        key="cart"
                        selected={this.props.location.pathname === "/cart"}
                        onPress={() => {
                            this.props.history.push("/cart")
                        }}
                    >
                        {this.props.location.pathname === "/cart"&&this.props.children}
                    </TabBar.Item>
                    <TabBar.Item
                       icon={
                        <i className="iconfont iconwode"></i>
                    }
                    selectedIcon={
                        <i className="iconfont iconwode" style={{color:"#ff2d4a"}}></i>
                    }
                        title="我的"
                        key="my"
                        selected={this.props.location.pathname === "/my"}
                        onPress={() => {
                            this.props.history.push("/my")
                        }}
                    >
                        {this.props.location.pathname === "/my"&&this.props.children}
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}
export default withRouter(TabBarExample)